<template>
    <div class="box-content">
      <!-- :rname="'stop-circle-o'" -->
      <Navbar :appTitle="title" @ClickRight="$router.push('/application')" />
      <Search
        ref="topSearch"
        class="search"
        placeholder="订单编号|客户"
        :isAdd="false"
        :isScreen="true"
        :isType="true"
        @onSearch="onSearch"
        @onScreen="onScreen"
      >
      </Search>
      <search-tag
        ref="SearchTag"
        :keyword="keyword"
        @resetCategory="resetCategory"
        @getCategory="getCategory"
        v-show="showSearchTag"
      ></search-tag>
  
      <!--分页列表 -->
      <div class="listBox" :class="{ 'currentEnvironmentTrue': GLOBAL.currentEnvironment, 'currentEnvironmentFalse': !GLOBAL.currentEnvironment }">
        <pageList
          :usedGetMethods="false"
          ref="pageList"
          :checkedShow="checkedShow"
          :operationTxt="operationTxt"
          :columns="columns"
          :listUrl="listUrl"
          @getCheckedValue="getCheckedValue"
          @handleList="handleList"
          @listTotal="listTotal"
        >
          <div class="rt-column" slot="body" slot-scope="{ item }">
  
            <div class="rt-row">
              <div class="column">
                <span class="column-t">客户：</span>
                <span class="column-c">{{ item.customName || '-' }}</span>
              </div>
            </div>
  
            <div class="rt-row">
              <div class="column">
                <span class="column-t">物品种类：</span>
                <span class="column-c"
                  >{{ item.serialInfoCount }}</span
                >
              </div>
            </div>
  
            <div class="rt-row">
              <div class="column">
                <span class="column-t">工单数：</span>
                <span class="column-c"
                  >{{ item.produceInfoCount }}</span
                >
              </div>
            </div>
          </div>
          <div
            slot="foot"
            slot-scope="{ item }"
            v-show="active == '0'"
            @click.stop="actions(item)"
            class="foot-slot"
          >
            <span></span
            ><span @click="toDistribute(item)">{{ asyncBtn(item) }}</span>
          </div>
        </pageList>
      </div>
    </div>
  </template>
  
  <script>
  import Search from "@/components/search";
  import SearchTag from "./SearchTag";
  import Navbar from "@/components/navBar/navBar_right";
  import TabBar from "@/components/TabBar";
  import pageList from "@/components/pageList";
  import moment from "moment";
  export default {
    name: "carRoomList",
    components: { Navbar, TabBar, pageList, Search, SearchTag },
    data() {
      return {
        active: '1',
        title: "销售订单",
        rtitle: "",
        rname: "", //search
  
        checkedShow: false, //列表是否支持选择
        operationTxt: "确定1", //选择按钮名称
        listUrl: "/sale/saleOrderInfo/list", //列表接口
        columns: {
          titleKey: "orderCode", //标题
          // subtitleKey: "description",//副标题
          // content: [
          //   //内容
          //   {
          //     name: "承诺交期",
          //     key: ["promiseDate"],
          //   },
          // ],
          // labelKey: ["promiseDate", "spec"], //标签
          // labelText: { promiseDate: "承诺交期：", spec: "规格：" }, //标签
        },
        showSearchTag: false,
        keyword: "",
        params: {
        },
      };
    },
    beforeRouteLeave(to, from, next) {
      let that = this;
      switch (true) {
        case that.showSearchTag && !that.$refs.SearchTag.ddthrVisible:
          that.showSearchTag = false;
          this.title = "销售订单";
          next(false);
          break;
        case that.$refs.SearchTag.ddthrVisible:
          that.$refs.SearchTag.ddthrVisible = false;
          this.title = "更多筛选";
          next(false);
          break;
        case !that.showSearchTag:
          next();
          break;
      }
    },
    computed: {},
    mounted() {
      this.searchQuery();
    },
    created() {
      //  this.$store.commit('SET_CURRENT_PREFIX', '/jksaas-easyMake')
    },
    methods: {
      /* 承诺交期是否超时判断 */
      promiseDateCheck(v) {
        let toDay = moment().format("YYYY-MM-DD");
        let checked = false;
        if (toDay == v) {
          checked = false;
        } else {
          checked = moment(v).isSameOrBefore(toDay);
        }
        return checked ? "" : "#ff4d4f";
      },
      toDistribute(v) {
        this.$router.push({
          path: "/distribute",
          query: {
            id: v.id,
            goodsId: v.goodsId,
          },
        });
      },
      // 操作
      actions(item) {},
      asyncBtn() {
        if (this.active == "0") {
          return "派发至车间";
        }
      },
      listTotal(t) {
        if (this.active == 0) {
          this.tabList[0].name = `待派发(${t})`;
        }
      },
      onSearch(v) {
        this.keyword = v;
        console.log(this.keyword);
        this.searchQuery();
      },
      onScreen() {
        this.keyword = this.$refs.topSearch.value;
        this.showSearchTag = true;
        this.title = "更多筛选";
      },
      resetCategory() {
        this.showSearchTag = false;
        // this.$refs.topSearch.value = ''
        // this.keyword = ''
        // this.params = {
        //   status: this.active
        // }
        // this.searchQuery()
      },
      getCategory(p, k) {
        this.params = p;
        this.keyword = k;
        this.showSearchTag = false;
        console.log(this.params);
        this.$refs.topSearch.value = k;
        this.title = "销售订单";
        this.searchQuery();
      },
      // 获取选择的列表数据
      getCheckedValue(ids, item) {
        console.log(ids, item);
      },
      //列表点击事件
      handleList(id, item, type) {
        console.log(id, item, type, "id:列表id,item:列表对象,type:事件名");
        if (type === "列表") {
          this.$router.push({
            path: "/salesContractDetails",
            query: {
              id: id,
              type: this.active,
              item: item,
            },
          });
        } else {
        }
      },
      // 加载列表
      getList() {
        // 传1代表从第一条数据开始
        this.$refs.pageList.onLoad(1);
      },
      // 搜索
      searchQuery() {
        // 搜索条件
        let queryParam = {
          ...this.params,
        };
        queryParam.keyword = this.keyword;
        this.$refs.pageList.searchQuery(queryParam);
      },
      // 重置
      searchReset() {
        this.$refs.pageList.searchReset();
      },
      tapChange(obj) {
        if (obj == 1) {
          this.columns.labelKey = ["promiseDate", "chargeUserIdText"];
          this.columns.labelText = {
            promiseDate: "承诺交期：",
            chargeUserIdText: "负责人：",
          };
        } else {
          this.columns.labelKey = ["promiseDate", "spec"];
          this.columns.labelText = { promiseDate: "承诺交期：", spec: "规格：" };
        }
        this.searchQuery();
      },
      goSearch() {
        this.$router.push({ path: "/carRoomPlaneSearch" });
      },
    },
  };
  </script>
  <style lang="scss" scoped>

.currentEnvironmentTrue{
  height: calc(100vh - 200px);
}
.currentEnvironmentFalse{
  height: calc(100vh - 300px);
}
  .box-content {
    height: 100vh;
    overflow-y: scroll;
    .serach {
      height: 66px;
      background: #f2f2f6;
      border-radius: 0;
      margin-bottom: 32px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      line-height: 66px;
      padding: 20px 24px;
      // border: 1px solid red;
      .placeh {
        font-size: 32px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #888888;
        line-height: 46px;
      }
      .icon {
        width: 30px;
        height: 32px;
      }
    }
    .serach-content {
      // height: 1.52rem;
      background: #ffffff;
      padding: 0 32px 32px 32px;
      .content {
        display: flex;
        .tapbtn {
          // height: 0.23rem;
          // background: #1890ff;
          background: #f2f2f6;
          border-radius: 4px;
          font-size: 32px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #888888;
          line-height: 46px;
          margin-right: 24px;
          text-align: center;
          padding: 8px 56px;
          cursor: pointer;
        }
        .active {
          color: #ffffff;
          background: #1890ff;
        }
      }
    }
  }
  .foot-slot {
    display: flex;
    justify-content: space-between;
    font-size: 28px;
    color: #1890ff;
  }
  /deep/.van-nav-bar {
    z-index: 99 !important;
  }
  .rt-column {
    padding: 34px 0 0 34px;
    //  border: 1px solid red;
  }
  .rt-row {
    margin-bottom: 20px;
    .column {
      width: 100%;
      display: flex;
      .column-t {
        font-size: 28px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #888888;
        margin-bottom: 6px;
      }
      .column-c {
        flex: 1;
        font-size: 28px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #191f25;
            /* （超出限定的宽度就隐藏内容) */
                overflow: hidden;
              /* （设置文字在一行显示不能换行） */
              white-space: nowrap;
              /* （规定当文本溢出时显示省略符） */
              text-overflow: ellipsis;
      }
    }
  }
  .listBox {
    height: calc(100vh - 300px);
    overflow-y: auto;
  }
  </style>